<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../themes/default/easyui.css"/>
    <link rel="stylesheet" href="../themes/icon.css"/>
    <script src="../jquery.min.js"></script>
    <script src="../jquery.easyui.min.js"></script>
</head>
<body>
<h2>基础选项卡</h2>
<div class="easyui-tabs" style="width: 700px;height: 250px"
        data-options="tabWidth:120" id="test">
    <div title="关于" style="padding: 10px">
        <p style="font-size: 13px">这是关于的标题</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div title="树文件">
        <ul class="easyui-tree">
            <span>食物</span>
            <li>
                <span>水果</span>
                <ul>
                    <li>苹果</li>
                    <li>橘子</li>
                </ul>
            </li>
            <li>
                <span>蔬菜</span>
                <ul>
                    <li>白菜</li>
                    <li>花菜</li>
                </ul>
            </li>
        </ul>
    </div>
    <div title="帮助"  style="padding: 10px">
        this is help content
    </div>
    <div title="sub tabs" style="padding: 10px">
        <div class="easyui-tabs" data-options="fit:true,plain:true,tabWidth:120">
            <div title="Title1">
                content1
            </div>
            <div title="Title2">
                content2
            </div>
        </div>
    </div>
</div>
<div id="mm">
    <div>welcome</div>
    <div>welcome</div>
    <div>welcome</div>
</div>
<div id="tt" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width: 700px;height: 250px;">

</div>
<div id="tab-tools">
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" onclick="addPanel()"></a>
    <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" onclick="removePanel()"></a>
</div>
</body>
<script>
    //下拉
    $(function(){
       var p = $('#test').tabs().tabs('tabs')[2];
        var mb= p.panel('options').tab.find('a.tabs-inner');
        mb.menubutton({
            menu:'#mm',
            iconCls:"icon-help"
        }).click(function(){
            $('#test').tabs('select',2)
        })
    });


    //创建删除
    var index=0;
    function addPanel(){
        index++;
        $('#tt').tabs('add',{
            title:'Tab'+index,
            content:'<div style="padding: 10px">Content'+index+'</div>',
            closable:true
        })
    }
    function removePanel(){
        var tab=$('#tt').tabs('getSelected');
        if(tab){
            var index=$('#tt').tabs('getTabIndex',tab);
            $('#tt').tabs('close',index);
        }
    }
</script>
</html>